<template>
  <common-info-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="close"
  >
    <common-info-table>
      <common-info-table-cell label="应用名称">
        {{ detail.applicationName }}
      </common-info-table-cell>
      <common-info-table-cell label="组织">
        {{ detail.deptName }}
      </common-info-table-cell>
      <common-info-table-cell label="所属分组">
        {{ detail.ancestors }}
      </common-info-table-cell>
      <common-info-table-cell label="负责人" width="50%">
        {{ detail.principal }}
      </common-info-table-cell>
      <common-info-table-cell label="手机号" width="50%">
        {{ detail.phone }}
      </common-info-table-cell>
      <common-info-table-cell label="域名" width="50%"
        >{{ detail.serverList && detail.serverList[0].domain }}
      </common-info-table-cell>
      <common-info-table-cell label="IP" width="50%"
        >{{ detail.serverList && detail.serverList[0].ip }}
      </common-info-table-cell>
      <common-info-table-cell label="端口"
        >{{ detail.serverList && detail.serverList[0].port }}
      </common-info-table-cell>
      <common-info-table-cell label="备注"
        >{{ detail.remark }}
      </common-info-table-cell>
    </common-info-table>
  </common-info-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: "应用详情",
      dialogShow: false,
      detail: {},
    };
  },
  methods: {
    show(data) {
      this.dialogShow = true;
      this.detail = data || {};
    },
    close() {
      this.dialogShow = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
